<template>
	<view class="recommend">
		<view class="box" v-for="(item,index) in recom" :key="index">
			<view class="box-top">
				<text class="top-text">今日疯抢</text>
				<view class="top-img">
          <image :src="item.image"></image>
        </view>
			</view>
			<view class="box-bottom">
				<text style="font-weight: bold;font-size:13px">{{item.text1}}</text><br/>
				<text style="color:#B8B8B8;font-size:10px;">{{item.text2}}</text><br/>
				<text style="border:2px solid #EE9354;font-size:10px;
				color:#EE9354;border-radius: 5px;padding:0 5px 0 5px;margin-top:10px;">{{item.text3}}</text><br/>
				<text><text style="color:#EE8C48;font-weight: bold;">{{item.price}}</text>
				/<text style="color:#9F9F9F">{{item.unit}}</text></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				recom:[
					{text1:'江苏无锡香菇猪肉包',text2:'猪肉肥美 | 鲜香嫩软 | 多汁美味',
					text3:'多汁香嫩',price:'￥8.79',unit:'笼',image:'../../static/recom1.png'},
					{text1:'浙江临海西兰花',text2:'基地直供 | 绿色培植 | 新鲜采摘',
					text3:'绿色新鲜',price:'￥4.79',unit:'斤',image:'../../static/recom2.png'},
					{text1:'云南高山大西红柿',text2:'鲜嫩多汁 | 软甜爽口 | ',
					text3:'美味多汁',price:'￥2.44',unit:'斤',image:'../../static/recom3.png'},
					{text1:'宁夏西吉县马铃薯',text2:'基地直供 | 绿色培植 | 新鲜采摘',
					text3:'绿色新鲜',price:'￥3.21',unit:'斤',image:'../../static/recom4.png'}
				]
			}
		}
	}
</script>

<style lang="scss">
	.recommend{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.box{
			width:48%;
			border-radius: 15px;
			background-color: white;
			margin-bottom:20px;
			position: relative;
			.box-top{
				border-radius:15px;
				border-bottom:4px solid #EEEEEE;
				.top-text{
					color:white;
					background-color: #E8865F;
					font-weight: bold;
					padding:0 5px 0 5px;
					border-top-left-radius:15px;
					border-bottom-right-radius:15px;
					position: absolute;
				}
				.top-img{
					text-align: center;
					
					image{
						width:130px;
						height:100px;
						margin-top:20px;
					}
				}
			}
			.box-bottom{
				background-color: white;
				border-bottom-left-radius:15px;
				border-bottom-right-radius:15px;
				padding:10px;
			}
		}
	}
</style>